import { FC, useState } from 'react';
import styles from './index.module.scss';
import { Button, Divider, Popconfirm, Space, Tag, message, Modal } from 'antd';
import {
  CopyOutlined,
  DeleteOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
  LineChartOutlined,
  StarOutlined,
} from '@ant-design/icons';
import { Link, useNavigate } from 'react-router-dom';
import { useRequest } from 'ahooks';
import { duplicateQuestionService, updateQuestionService } from '../../services/question';
export interface PropsType {
  id: string;
  title: string;
  isPublished: boolean;
  isStar: boolean;
  isDeleted: boolean;
  answerCount: number;
  createdAt: string;
}
const QuestionCard: FC<PropsType> = (props: PropsType) => {
  const { id, title, isPublished, isStar, isDeleted, answerCount, createdAt } = props;
  const [starState, setStarState] = useState(isStar);
  const nav = useNavigate();
  const { confirm } = Modal;

  const { loading: updateStarLoading, run: updateStar } = useRequest(
    async () => {
      const data = await updateQuestionService(id, { isStar: !starState });
      return data;
    },
    {
      manual: true,
      onSuccess: () => {
        setStarState(!starState);
        message.success('修改星标成功');
      },
    },
  );

  const { loading: duplicateLoading, run: duplicate } = useRequest(
    async () => {
      const data = await duplicateQuestionService(id);
      return data;
    },
    {
      manual: true,
      onSuccess: () => {
        nav(`/question/edit/${id}`);
        message.success('复制成功');
      },
    },
  );

  const [isDeletedState, setIsDeletedState] = useState(isDeleted);
  const { loading: deleteLoading, run: deleteHandle } = useRequest(
    async () => {
      const data = await updateQuestionService(id, { isDeleted: !isDeletedState });
      return data;
    },
    {
      manual: true,
      onSuccess: () => {
        setIsDeletedState(!isDeletedState);
        message.success('删除成功');
      },
    },
  );

  if (isDeletedState) return;

  return (
    <>
      <div className={styles.container}>
        <div className={styles.title}>
          <div className={styles.left}>
            <Link to={isPublished ? `/question/stat/${id}` : `/question/edit/${id}`}>
              <Space>
                {starState && <StarOutlined style={{ color: 'red' }} />}
                {title}
              </Space>
            </Link>
          </div>
          <div className={styles.right}>
            <Space>
              {isPublished ? <Tag color="processing">已发布</Tag> : <Tag>未发布</Tag>}
              <span>答卷:{answerCount}</span>
              <span>{createdAt}</span>
            </Space>
          </div>
        </div>
        <Divider style={{ margin: '12px 0' }} />
        <div className={styles['button-container']}>
          <div className={styles.left}>
            <Space>
              <Button
                icon={<EditOutlined />}
                size="small"
                type="text"
                onClick={() => {
                  nav(`/question/edit/${id}`);
                }}
              >
                编辑问卷
              </Button>
              <Button
                icon={<LineChartOutlined />}
                size="small"
                type="text"
                onClick={() => {
                  nav(`/question/stat/${id}`);
                }}
                disabled={!isPublished}
              >
                问卷统计
              </Button>
            </Space>
          </div>

          <div className={styles.right}>
            <Space>
              <Button
                icon={<StarOutlined />}
                size="small"
                type="text"
                disabled={updateStarLoading}
                onClick={updateStar}
              >
                {starState ? '取消标星' : '标星'}
              </Button>
              <Popconfirm
                title="确定复制该问卷吗?"
                okText="确定"
                cancelText="取消"
                onConfirm={() => {
                  duplicate();
                }}
              >
                <Button
                  icon={<CopyOutlined />}
                  disabled={duplicateLoading}
                  size="small"
                  type="text"
                >
                  复制
                </Button>
              </Popconfirm>

              <Button
                icon={<DeleteOutlined />}
                size="small"
                type="text"
                disabled={deleteLoading}
                onClick={() => {
                  confirm({
                    title: '确定删除该问卷吗?',
                    icon: <ExclamationCircleOutlined />,
                    okText: '确定',
                    cancelText: '取消',
                    onOk: () => {
                      deleteHandle();
                    },
                  });
                }}
              >
                删除
              </Button>
            </Space>
          </div>
        </div>
      </div>
    </>
  );
};
export default QuestionCard;
